<template>
	<view style="position: relative;">
		<!--搜索-->
 		<uni-search-bar @input="input" radius="100" placeholder="搜素音乐, 视频, 歌词, 电台"
		@hanlesearch="search" style="position: fixed;top: 0; right: 0; left: 0;z-index: 999;"
		@confirm="search"
		></uni-search-bar>
		<!--标题栏目-->
		
 		<view class="status"></view>
		
		<view>
			<swiper-tab-head
				:tabBars="tabBars" 
				:tabIndex="tabIndex"
				@tabtap="tabtap">
			</swiper-tab-head>			
		</view>
		
		<view class="uni-tab-bar">
			<swiper class="swiper-box" 
			:style="{height:swiperheight+'px'}" 
			:current="tabIndex"
			@change="tabChange">
				<!--单曲-->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="scrolltolower" >
						<block v-if="istap.Song">
							<play-list :playListId="0" :aid="0"  :privileges="searchSongInfo"
							></play-list>
						</block>
					</scroll-view>
				</swiper-item>
				<!--歌手-->
				<swiper-item >
					<scroll-view scroll-y class="list" @scrolltolower="scrolltolower" >
						<block v-if="istap.Songer">
							<custom-search-list :list="searchSongerInfo" :songer="true" :jiazai="jiazai.Songer"
							 ></custom-search-list>
						</block>
					</scroll-view>
				</swiper-item>
				<!--专辑-->
				<swiper-item >
					<scroll-view scroll-y class="list" @scrolltolower="scrolltolower"  >
						<block v-if="istap.Albums">
							<custom-search-list :list="searchAlbumsInfo" :album="true" :jiazai="jiazai.Album"
							></custom-search-list>
						</block>
					</scroll-view>
				</swiper-item>
				<!--歌单-->
				<swiper-item >
					<scroll-view scroll-y class="list" @scrolltolower="scrolltolower" >
						<block v-if="istap.List">
							<custom-search-list :list="searchListInfo" :jiazai="jiazai.List"
							 ></custom-search-list>
						</block>
					</scroll-view>
				</swiper-item>
				<!--MV-->
				<swiper-item >
					<scroll-view  class="list" :style="{height:swiperheight+'px'}"  >
						<image src="../../static/kaifa.png"  mode="scaleToFill"  
						style="width: 100%;" :style="{height:swiperheight+'px'}"
						></image>
					</scroll-view>
				</swiper-item>
				<!--主播电台-->
				<swiper-item >
					<scroll-view class="list" :style="{height:swiperheight+'px'}" >
						<image src="../../static/kaifa.png"  mode="scaleToFill"
						style="width: 100%;" :style="{height:swiperheight+'px'}"
						></image>		
					</scroll-view>
				</swiper-item>
				<!--用户-->
				<swiper-item >
					<scroll-view  scroll-y class="list" @scrolltolower="scrolltolower" >
						<block v-if="istap.User">
							<custom-search-list :list="searchUserInfo" :user="true" :jiazai="jiazai.User"
							></custom-search-list>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>   
		</view>
		
		
	</view>
</template>

<script>
	import uniSearchBar from '../../components/search/uni-search-bar/uni-search-bar.vue'
	import swiperTabHead from '../../components/index/swiper-tab-head/swiper-tab-head.vue';
	import playList from '../../components/playlist/play-list/play-list.vue';
	import customSearchList from '../../components/search/custom-search-list/custom-search-list.vue';
	import uniStatusBar from '../../components/home/uni-status-bar/uni-status-bar.vue';
	export default {
		components:{
			swiperTabHead,
			uniSearchBar, 
			playList,
			customSearchList,
			uniStatusBar
		},
		data() {
			return {
				swiperheight:500,
				tabIndex:0,
				tabBars:[
					{ name:"单曲",id:"danqu"},
					{ name:"歌手",id:"geshou" },
					{ name:"专辑",id:"zhuanji"},
					{ name:"歌单",id:"gedan"},
					{ name:"MV",id:"MV"},
					{ name:"主播电台",id:"diantai"},
					{ name:"用户",id:"yonghu"}
				],
				//用户输入的值
				inputValue:'',
				//激活索引
				index:0,
				//单曲
				searchSongInfo:[],
				//歌手
				searchSongerInfo:[],
				//专辑
				searchAlbumsInfo:[],
				//歌单
				searchListInfo:[],
				//用户
				searchUserInfo:[],
				istap:{
					Song:false,
					Songer:false,
					Albums:false,
					List:false,
					User:false,
				},
				//请求的数据量
				limit:{
					Songlimit:30,
					Songerlimit:30,
					Albumslimit:30,
					Listlimit:30,
					Userlimit:30,
				},
				jiazai:{
					Song:true,
					Songer:true,
					Album:true,
					List:true,
					User:true,
				}
			}
		},
		watch:{
			inputValue:function (value) {
				if(!value){
					this.clean()
				}
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res)=> {
					let height=res.windowHeight-uni.upx2px(100)-uni.upx2px(80)
					this.swiperheight=height;
				}
			});
		},
		methods: {
			// tabbar点击事件
			tabtap(index){
				this.tabIndex=index;
				this.getinfo(index);
			},
			// 滑动事件
			tabChange(e){
				this.tabIndex=e.detail.current;
				this.getinfo(e.detail.current)
			},
			//输入的值
			input(res) {
				this.inputValue=res.value;
			},
			//清除事件
			clean(){
				this.searchSongInfo=[],
				this.searchSongerInfo=[],
				this.searchAlbumsInfo=[],
				this.searchListInfo=[],
				this.searchUserInfo=[],
				this.istap={
					Song:false,
					Songer:false,
					Albums:false,
					List:false,
					User:false,
				};
				this.limit={
					Songlimit:30,
					Songerlimit:30,
					Albumslimit:30,
					Listlimit:30,
					Userlimit:30,
				};
			},
			//搜索
			search(){
				let {tabIndex}=this;
				this.getinfo(tabIndex);		
			},
			//第一次加载
			getinfo(index){
				let {inputValue}=this;
				if(inputValue){
					switch(index) {
						case 0:
							if(!this.istap.Song){
								this.getSearchSongInfo();
								this.istap.Song=true;
							}
						break;
						case 1:
							if(!this.istap.Songer){
								this.getSearchSongerInfo();
								this.istap.Songer=true
							}
						break;
						case 2:
							if(!this.istap.Albums){
								this.getSearchAlbumsInfo();
								this.istap.Albums=true;
							}
						break;
						case 3:
							if(!this.istap.List){
								this.getSearchListInfo();
								this.istap.List=true;
							}
						break;
						case 6:
							if(!this.istap.User)
							this.getSearchUserInfo();
							this.istap.User=true;
						break;
					}
				}
				else{
					this.tips("请输入想要搜索的内容")
				}
			},
			//提示
			tips(data){
				uni.showToast({
				  title: data,
				  icon: 'none',
				});
			},
			//单曲
			async getSearchSongInfo(){
			    let {inputValue}=this;
				let limit=this.limit.Songlimit;
			    const resultInfo=await this.request({url: this.bsurl+'search?type=1&limit='+limit+'&keywords='+inputValue});
			    if(resultInfo.code==400){
			      this.tips('没有下一页了或您的操作太过频繁');
				  this.jiazai.Song=false;
			    }
			    else{
			        let SearchInfo=resultInfo.result.songs.map(v=>{
						return {
						  id:v.id,
						  name:v.name,
						  author:v.artists[0].name,
						  album:v.album.name
						}
			        })
			        this.searchSongInfo=[...SearchInfo];
			    } 
				if(this.Finish()){
					setTimeout(()=>{
						this.isshow=false
					}, 1500);
				}	
			},
			//歌手
			async getSearchSongerInfo(){
			    let {inputValue}=this;
				let limit=this.limit.Songerlimit; 
			    const resultInfo=await this.request({url: this.bsurl+'search?type=100&limit='+limit+'&keywords='+inputValue});
			    if(resultInfo.code==400){
			      this.tips('没有下一页了或您的操作太过频繁');
				  this.jiazai.Songer=false;
			    }
			    else{
					let SearchInfo=resultInfo.result.artists.map(v=>{
						return {
						  pic:v.picUrl+'?param=100y100',
						  id:v.id,
						  name:v.name,
						}
			        })
			        this.searchSongerInfo=[...SearchInfo];
					this.jiazai.Songer=SearchInfo.length<30?false:true;
			    }
			},
			//专辑
			async getSearchAlbumsInfo(){
			    let {inputValue}=this;
				let limit=this.limit.Albumslimit;
			    const resultInfo=await this.request({url: this.bsurl+'search?type=10&limit='+limit+'&keywords='+inputValue});
			    if(resultInfo.code==400){
					this.tips('没有下一页了或您的操作太过频繁');
					this.jiazai.Album=false;
			    }
			    else{
				let SearchInfo=resultInfo.result.albums.map(v=>{
				  return {
					pic:v.picUrl+'?param=100y100',
					id:v.id,
					name:v.name,
					author:v.artist.name,
				  }
				})
				this.searchAlbumsInfo=[...SearchInfo];
				this.jiazai.Album=SearchInfo.length<30?false:true;
			  }
			},
			 //歌单
			async getSearchListInfo(){
			    let {inputValue}=this;
				let limit=this.limit.Listlimit;
			    const resultInfo=await this.request({url: this.bsurl+'search?type=1000&limit='+limit+'&keywords='+inputValue});
			    if(resultInfo.code==400){
			      this.tips('没有下一页了或您的操作太过频繁');
				  this.jiazai.List=false;
			    }
			    else{
			        let SearchInfo=resultInfo.result.playlists.map(v=>{
			            return {
							pic:v.coverImgUrl+'?param=100y100',
							id:v.id,
							name:v.name,
							author:v.creator.nickname,
							trackCount:v.trackCount,
							playCount:v.playCount,
			            }
			        })
			        this.searchListInfo=[...SearchInfo];
					this.jiazai.List=SearchInfo.length<30?false:true;
			    }
			},
			//用户
			async getSearchUserInfo(){
			    let {inputValue}=this;
				let limit=this.limit.Userlimit;
			    const resultInfo=await this.request({url: this.bsurl+'search?type=1002&limit='+limit+'&keywords='+inputValue});
			    if(resultInfo.code==400){
			      this.tips('没有下一页或您的操作太过频繁');
				  this.jiazai.User=false;	  
			    }
			    else{
			        let SearchInfo=resultInfo.result.userprofiles.map(v=>{
						return {
						    pic:v.avatarUrl+'?param=100y100',
						    id:v.userId,
						    name:v.nickname,
						    signature:v.signature,
							gender:v.gender
						}
			        })
			      this.searchUserInfo=[...SearchInfo];
				  this.jiazai.User=SearchInfo.length<30?false:true;
			    }
			  },
			  //触底事件
			  scrolltolower(){
			  	let {tabIndex}=this;
				switch(tabIndex) {
					case 0:
						this.limit.Songlimit+=30;
						this.getSearchSongInfo();
					break;
					case 1:
						this.limit.Songerlimit+=30;
						this.getSearchSongerInfo();
					break;
					case 2:
						this.limit.Albumslimit+=30;
						this.getSearchAlbumsInfo();
					break;                             
					case 3:
						this.limit.Listlimit+=30;
						this.getSearchListInfo();
					break;
					case 6:
						this.limit.Userlimit+=30;
						this.getSearchUserInfo();
					break;
				}
			  },
		}
	}
</script>

<style lang="less" scoped>
	.status{ 
		position: relative;
		top: 0;
		background-color: red;
		height: 80upx;
	}
</style>
